<template>
	<view class="content">
			<!-- 产品变更清单 -->
			<view class="plan" >
				<view class="grace-nowrap grace-flex-vcenter">
					<view class="hd-title"></view>
					<view style="font-size: 34rpx;">产品变更清单</view>
				</view>
				<!-- 列表展示 -->
				<view class="product" >
					<view class="product-content " v-for="item in list" :key="item.id">
						<view class="">
							<view class="product-title">授权编号<!--  --></view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.Define4" disabled="disabled"/>	
							</view>
						</view>
						<view class="">
							<view class="product-title">客户编码</view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.Define1" disabled="disabled"/>
							</view>
						</view>
						<view class="">
							<view class="product-title">授权客户（新客户请先做新终端引入申请）</view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.cInvCode" disabled="disabled"/>
							</view>
						</view>
						<view class="">
							<view class="product-title">产品及产品线</view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.cInvName"/>
							</view>
						</view>
						<view class="">
							<view class="product-title">授权有效期</view>
							<view class="left-margin">
								<input class="uni-input" placeholder="请输入" type="text" v-model="item.OrderNo"/>
							</view>
						</view>
						<view class="">
							<view class="product-title">授权类型</view>
							<view class="left-margin">
								<vvSelect v-model="item.Define3" 
									placeholder="请选择"
								 :list="typeOption" valueKey="productid" ></vvSelect>
							</view>
						</view>
						<view class="">
							<view class="product-title">经直销</view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.Define2" disabled="disabled"/>
							</view>
						</view>
						<view class="cancel" @click="del(item)">
							<view class="icon iconfont icon-quxiao"></view>
						</view>
					</view>
				</view>
				<view class="add grace-nowrap" @click="addproduct">
					<view class="icon iconfont icon-tianjia" style="color: #00B26A; font-size: 42rpx;"></view>
					<span style='font-size: 32rpx;'>新增</span>
				</view>
			</view>
			<!-- 选择客户窗口 -->
			<uni-drawer ref="customerChoose" mode="right" :width="300">
				<my-customer-choose @confirm="addCustomer"></my-customer-choose>
			</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import myCustomerChoose from '@/components/my-customer-choose.vue'
	import vvSelect from '@/components/vv-select/vv-select'
	export default {
		props:{
			list:{
				default: [],
				type: Array
			},
			OldDepart:{
				default: '',
				type: String
			}
		},
		data() {
			return {
				customerList:[],
				user: {},
				typeOption:[{productid:'入院备案',name:'入院备案'},{productid:'投标',name:'投标'},{productid:'短期推广',name:'短期推广'},{productid:'收款',name:'收款'},{productid:'特殊招标',name:'特殊招标'},{productid:'其他授权',name:'其他授权'}]
			}
		},
		components: {
			uniDrawer,
			uniSearchBar,
			myCustomerChoose,
			vvSelect
		},
		computed: {
			i18n() {
				return this.$t('form')
			}
		},
		onLoad(opt) {
			
		},
		methods: {
			//添加产品
			addproduct() {
				if( this.OldDepart ){
					this.$refs.customerChoose.open()
					// this.$emit('reload')
				}else{
					uni.showToast({
						title: '【请选择所属大区！】',
						icon:'none'
					})
				}
			},
			del(item){
				let index = this.list.indexOf(item)
				let list = this.list.splice(index,1)
				console.log(list)
				this.$emit('reload')
			},
			addCustomer(item){
				this.$refs.customerChoose.close()
				this.list.push({
					Define4: '',
					Define1: item.cCusCode,
					cInvCode: item.cCusName,
					cInvName: '',
					OrderNo: '',
					Define3: '',
					Define2: ''
				})
				console.log(item)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/common/css/style.css";
	@import "@/common/css/icons.css";
	.grace-nowrap{display:flex; flex-direction:row; flex-wrap:nowrap;}
	.grace-flex-vcenter{align-items:center;}
	.cancel{
		color: #d10000;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		.icon{
			font-size: 42rpx;
		}
	}
	.hd-title{
		width: 10rpx;height: 30rpx;background-color: #00B26A;margin-right: 5px;
	}
	.product {
		margin-top: 30rpx;
		font-size: 32rpx;
	}
	
	.product-content {
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: rgba(0, 167, 60, 0.19);
		line-height: 60rpx;
	}
	
	.product-title {
		font-weight: 500;
	}
	
	.left-margin {
		margin-left: 50rpx;
		color: #C0C0C0;
	}
	
	.content {
		
		font-size: 26rpx;
		font-weight: 500;
	}
	
	.plan {
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	
	.add {
		padding: 20rpx;
	}
	.scroll-wrap{
		height: 500px;
		background: #eee;
	}
	
</style>
